<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手动轮播图</title>
    <link rel="stylesheet" href="./手动轮播图.css">
</head>
<body>
    <!-- 创建外部展示容器 -->
    <!-- 手动轮播利用 input 的 checked 状态来为 a 标签添加选中状态，
        通过 a 标签链接 ,布局方式采用的是 input + a 标签，
        不可以添加父级，不然css无法选择到 banner-img-container -->
    <div class="banner-container">
        <!-- 轮播图圆点 -->
        <!-- type="radio"定义单选按钮 -->
        <input type="radio" name="radio-set" checked="checked" id="banner-control-1">
        <a class="banner-nav-a" href="#banner01"></a>
        <input type="radio" name="radio-set" checked="checked" id="banner-control-2">
        <a class="banner-nav-a" href="#banner02"></a>
        <input type="radio" name="radio-set" checked="checked" id="banner-control-3">
        <a class="banner-nav-a" href="#banner03"></a>
        <input type="radio" name="radio-set" checked="checked" id="banner-control-4">
        <a class="banner-nav-a" href="#banner04"></a>
        <input type="radio" name="radio-set" checked="checked" id="banner-control-5">
        <a class="banner-nav-a" href="#banner05"></a>

        <!-- 轮播图图片容器 -->
        <div class="banner-img-container">
            <img id="banner01" src="../img/banner01.png" >
            <img id="banner02" src="../img/banner02.png" >
            <img id="banner03" src="../img/banner03.png" >
            <img id="banner04" src="../img/banner04.png" >
            <img id="banner05" src="../img/banner05.png" >
        </div>
    </div>
</body>
</html>